const path = require('path');

const gulp = require('gulp');
const webpack = require('gulp-webpack');
const sass = require('gulp-sass');
const gulpPlumber = require('gulp-plumber');
const gulpWatch = require('gulp-watch');
const browserSync = require('browser-sync').create();

let webpackConfig = {
    output: {
        filename: 'index.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            { test: /\.jsx$/, loader: 'jsx-loader' }
        ]
    }
};

gulp.task('default', ['script','style'], () => {
    browserSync.init({
        server: {
            baseDir: './www/'
        },
        open: true
    });

    gulpWatch(['./src/**/*.jsx','./src/**/*.js'], () => { gulp.start('script'); });
    gulpWatch('./src/**/*.scss', () => { gulp.start('style'); });
});

gulp.task('script', () => {
    gulp.src('./src/index.jsx')
        .pipe(gulpPlumber())
        .pipe(webpack(webpackConfig))
        .pipe(gulp.dest('./www/dest'))
        .pipe(browserSync.stream());
});

gulp.task('style', () => {
    gulp.src('./src/style/index.scss')
        //.pipe(gulpPlumber())
        .pipe(sass())
        .pipe(gulp.dest('./www/dest/'))
        .pipe(browserSync.stream())
});